import router, { syncRoutes } from './router'
import { getToken } from './utils/auth'
import store from './store'
// 没有token也能访问的页面
const whiteList = ['/login', '/404']
// 获取一级和二级路由权限点
function getFirstRoutePerms(perms) {
  // perms是所有的权限点，每一个权限点就会对应一个一级菜单
  // 所以：有几个权限点就会有几个一级菜单
  const first = perms.map(item => {
    return item.split(':')[0]
  })
  // first是所有的一级菜单权限数组，但是会有重复的
  console.log('一级路由权限点：', [...new Set(first)])
  return [...new Set(first)]
}
function getSecondRoutePerms(perms) {
  const second = perms.map(item => {
    return item.split(':')[0] + ':' + item.split(':')[1]
  })
  console.log('二级路由权限点：', [...new Set(second)])
  return [...new Set(second)]
}
// 通过权限筛选出有权限点的路由
function getSyncRoutes(first, second) {
  // syncRoutes是所有的动态路由，要筛选出有权限的路由(1级和2级)
  // syncRoutes的每一项是所有的一级路由集合
  // 如果是超级管理员，直接不过滤路由，返回所有的动态路由
  if (first.includes('*')) {
    return syncRoutes
  }
  const firstRoute = syncRoutes.filter(item => {
    // firstRoute.permission路由标记的权限点
    return first.includes(item.permission)
  })
  // syncRoutes的每一项的children属性是二级路由集合
  // 分析：虽然要筛选二级路由，但是，二级路由是一级路由的子集
  // 筛选过后，只会缺失二级路由，并不会少了一级路由
  const res = firstRoute.map(firstItem => {
    // firstItem是一级路由的每一项
    const children = firstItem.children.filter(secondItem => {
      return second.includes(secondItem.permission)
    })
    // children是过滤后的二级集合，要替换原来的二级集合
    firstItem.children = children
    return firstItem
  })
  return res
}
// 路由前置守卫
router.beforeEach(async(to, from, next) => {
  // to表示要跳转到哪里去
  // from表示从哪里跳转的
  // next表示是否放行的函数
  const token = getToken()
  console.log('token:' + token)
  //   如果有token->放行
  if (token) {
    next()
    if (!store.state.user.userProfile.id) {
      // 确保当前已经拿到token了,获取用户的权限点(当前是路由拦截里面，会频繁出发，如果没有再去获取)
    // 此时已经拿到token，可以获取用户的详细信息了(数据涉及到用户名和权限点，需要各个页面访问，将数据放置vuex中)
      const perms = await store.dispatch('user/getUserProfile')
      // 1.perms用户所有的权限点，通过权限点筛选有权限的2路由
      // ---------------------------------------------------------
      // 路由筛选第一步：筛选一级路由权限点
      const first = getFirstRoutePerms(perms)
      // 路由筛选第二步：筛选二级路由权限点
      const second = getSecondRoutePerms(perms)
      // 路由筛选第三部：通过一级和二级的权限点，筛选出有权限的路由
      const res = getSyncRoutes(first, second)
      // res是所有有权限的动态路由集合，添加到route对象就可以了
      // 路由筛选第四部：将每一个动态路由添加到router中(只能实现url跳转，但是菜单没有渲染)
      res.forEach(item => {
        router.addRoute(item)
      })
      // 路由筛选第五部：让菜单展示也添加上动态路由
      store.commit('menu/setRouteList', res)
    }
  } else {
    //   否则，判断是否为白名单,是白名单，也放行
    if (whiteList.includes(to.path)) {
      next()
    } else {
      //   不是，跳转登录页
      next('/login')
    }
  }
})
